{% extends "../master.html" %}
{% block hfm_css %}
    <style>
        .layui-fluid{
            padding: 15px;
            position: relative;
            margin: 0 auto;
        }
        .layuiadmin-btn-group{
            position: absolute;
            right: 15px;
        }
        .layuiadmin-card-list{
            padding: 15px;
        }
        .layui-card-header{
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 14px;
        }
        .layuiadmin-card-list p.layuiadmin-big-font{
            font-size: 28px;
            color: #666;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
            white-space: nowrap;
        }
        .layuiadmin-span-color{
            position: absolute;
            right: 15px;
            font-size: 14px;
        }
        /**中间块调整**/
        .layadmin-backlog-body{
            display: block;
            padding: 10px 15px;
            background-color: #f8f8f8;
            color: #999;
            border-radius: 2px;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
        .layadmin-backlog-body h3{
            padding-bottom: 10px;
            font-size: 12px;
        }
        .layadmin-backlog-body p cite{
            font-style: normal;
            font-size: 30px;
            font-weight: 300;
            color: #009688;
        }
        .layui-col-xs6{
            width: 12.5%;
        }
        .layui-col-space10 > *{
            padding: 5px;
        }
        .overX{
            overflow-x: auto;
            height: 125px;
        }
    </style>
{% end %}

{% block hfm_js%}
    <script src="{{ static_url('js/echarts/echarts.min.js') }}"></script>
{% end %}

{% block page_content %}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--汇总统计开始-->
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <label>用户总数</label>
                    <span class="layui-badge layui-bg-blue layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">1</p>
                    <p>
                        总计用户量
                        <span class="layuiadmin-span-color">1 <i class="layui-inline layui-icon layui-icon-user"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <label>违规总数</label>
                    <span class="layui-badge layui-bg-red layuiadmin-badge">月</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">0</p>
                    <p>
                        总计违规统计
                        <span class="layuiadmin-span-color">0 <i class="layui-inline layui-icon layui-icon-flag"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <label>资产总数</label>
                    <span class="layui-badge layui-bg-green layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">0</p>
                    <p>
                        总资产数量
                        <span class="layuiadmin-span-color">0 <i class="layui-inline layui-icon layui-icon-template-1"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <label>风险总数</label>
                    <span class="layui-badge layui-bg-orange layuiadmin-badge">周</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font">0</p>
                    <p>
                        资产风险统计
                        <span class="layuiadmin-span-color">0 <i class="layui-inline layui-icon layui-icon-face-surprised"></i></span>
                    </p>
                </div>
            </div>
        </div>
        <!--汇总统计结束-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">违规内容审查</div>
{#                    <div class="layui-card-body">#}
{#                        <div class="layui-btn-group layuiadmin-btn-group">#}
{#                            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">昨日</a>#}
{#                            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">今日</a>#}
{#                        </div>#}
{#                    </div>#}
                <div class="layui-card-body">
                    <div class="layui-row">
                        <ul class="layui-row layui-col-space10 layui-this overX">
                            {% if all_strategy_list%}
                                {% for all_strategy_item in all_strategy_list%}
                                    <li class="layui-col-xs6">
                                        <a href="javascript:;" onclick="layer.tips('{{all_strategy_item.strategy_name}}', this, {tips: 3});" class="layadmin-backlog-body">
                                            <h3>{{all_strategy_item.strategy_name}}</h3>
                                            <p><cite>0</cite></p>
                                        </a>
                                    </li>
                                {% end %}
                            {% end %}
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!--爬虫统计开始-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-header">爬虫采集量</div>
                    <div class="layui-card-body">
                        <div class="layui-btn-group layuiadmin-btn-group">
                            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">上周</a>
                            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-xs">本周</a>
                        </div>
                    </div>
                <div class="layui-card-body">
                    <div class="layui-row">
                        <div class="layui-col-sm8">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagetwo" id="main" style="width: 100%; height: 280px;" lay-anim="fade">
                                 <blockquote class="layui-elem-quote">
                                    注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。
                                </blockquote>
                            </div>
                        </div>
                        <div class="layui-col-sm4">
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font" style="color: #2b542c">链接采集数量</p>
                                    <span style="color: #2b542c">同前一小时增长</span>
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                    <div class="layui-progress-bar" lay-percent="30%" style="width: 30%;"><span class="layui-progress-text">30%</span></div>
                                </div>
                            </div>
                            <div class="layuiadmin-card-list">
                                <p class="layuiadmin-normal-font" style="color: #2b542c">图片采集数量</p>
                                    <span style="color: #2b542c">同前一小时增长</span>
                                <div class="layui-progress layui-progress-big" lay-showpercent="yes">
                                    <div class="layui-progress-bar" lay-percent="30%" style="width: 30%;"><span class="layui-progress-text">30%</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--爬虫统计结束-->
    </div>
</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['链接数量','图片数量','总抓取量']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'链接数量',
                type:'line',
                stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'图片数量',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'总抓取量',
                type:'line',
                stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
{% end %}